<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>3.深度监视</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <h4 @click="sum+=1">{{sum}}</h4>
      <ul>
        <li>名字：{{person.name}}</li>
        <li>真实年龄：{{person.age.a1}}</li>
        <li>对外年龄：{{person.age.a2}}</li>
        <li>座驾颜色：{{person.car.color}}</li>
        <li>座驾价格：{{person.car.price}}</li>
        <button @click="person.name = 'tonyDuan'">修改名字</button>
        <button @click="person.age.a2 += 1">对外年龄+1</button>
        <button @click="changePerson">彻底替换掉person对象</button>
      </ul>
    </div>

    <script type="text/javascript">
      new Vue({
        el:'#demo',
        data:{
          sum:1,
          person:{
            name:'老段',
            age:{a1:52,a2:29},
            car:{color:'绿色',price:100},
          }
        },
        methods: {
          changePerson(){
            this.person = {
              name:'大沫沫',
              age:{a1:100,a2:5},
              car:{color:'红色',price:1000}
            }
          }
        },
        watch:{
          sum:{
            handler(value){
              console.log('sum变化了',value)
            }
          },
          person:{
            deep:true,
            handler(value){
              console.log('person变化了(整体、细节)',value)
            }
          }
        }
      })
    </script>
  </body>
</html>